import React from 'react';
import ReactDOM from 'react-dom';
import Myinput from './myInput'
import Mylist from './myList'
class App extends React.Component {
  state = {
    todo: '',
    list: [{ id: 1, val: 'test' }]
  }
  change = (e) => {
    this.setState({
      todo: e.target.value
    })
  }
  submit = (e) => {
    console.log('tijiao')
    this.setState({
      list: this.state.list.concat({ id: Math.random(), val: this.state.todo }),
      todo: ''
    })
  }
  del(id) {
    console.log(id)
    this.setState({
      list: this.state.list.filter(v => v.id !== id)
    })
  }
  render() {
    let { todo, list } = this.state;
    return <div className=''>
      <Myinput value={todo} onChange={this.change} onSubmit={this.submit} />
      {/* <Mylist data={list} onDel={(id) => this.del(id)}>
        <h2>6666</h2>
      </Mylist> */}
      <Mylist
        data={list}
        onDel={(id) => this.del(id)}
        render={(qqq) => {
          return <h2>{qqq.val} <b onClick={e => this.del(qqq.id)}>删除</b></h2>
        }}
      ></Mylist>
      <Mylist
        data={list}
        onDel={(id) => this.del(id)}
      >
        <h3 qqq='title'>hahah</h3>
        <h4 qqq='footer'></h4>
      </Mylist>
    </div>;
  }
}

ReactDOM.render(<App />, document.getElementById('root'))